<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getHWClassAll, addHW, type IClass, type IHW, } from '@/api/hwApi';
import { getClassAll } from '@/api/classApi';
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'VHWList',
})

const router = useRouter()

const hwList = ref<IHW[]>([])
async function fetchHWClassAll(id: number) {
  const { code, data } = await getHWClassAll(id)
  if (code === 2000) {
    hwList.value = data as IHW[]
  }
}


// class
const classList = ref<IClass[]>([])
async function fetchClassAll() {
  const result = await getClassAll()
  classList.value = result.data as IClass[]
}

fetchClassAll()

// 查找班级作业
const searchClassId = ref(null)
const handleSelectChange = function () {
  fetchHWClassAll(searchClassId.value!)

}

// dialogVisible
const dialogVisible = ref(false)

const hwForm = ref({
  classId: '',
  nickname: '',
  startTime: '',
  endTime: '',
})

const handleAddHW = async () => {
  const { code, msg } = await addHW(hwForm.value)
  console.log(code, msg);
  if (code === 2000) {
    dialogVisible.value = false
    ElMessage.success(msg)
  } else {
    ElMessage.error(msg)
  }
}

const handleToDetail = (row: IHW) => {
  console.log(row);
  router.push({
    path: `/hw/detail/${row.classId}/${row.id}`,
  })
}

</script>

<template>
  <div class='container'>
    <!-- 操作 -->
    <div class="operator">
      <el-button type="primary" @click="dialogVisible = true">添加作业</el-button>
      <el-select @change="handleSelectChange" v-model="searchClassId" placeholder="Select" size="large"
        style="width: 240px">
        <el-option v-for="item in classList" :key="item.id" :label="item.nickname" :value="item.id" />
      </el-select>
    </div>
    <!-- 列表 -->
    <el-table :data="hwList" style="width: 100%">
      <el-table-column label="序号" type="index" width="180" />
      <el-table-column prop="nickname" label="作业名称" width="180" />
      <el-table-column label="开始时间" width="280">
        <template #default="{ row }">
          <el-date-picker readonly disabled v-model="row.startTime" type="date" placeholder="Pick a day" />
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="280">
        <template #default="{ row }">
          <el-date-picker readonly disabled v-model="row.endTime" type="date" placeholder="Pick a day" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="操作" width="240">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleToDetail(row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加面板 -->
    <el-dialog title="添加学生" v-model="dialogVisible">
      <el-form :model="hwForm" label-width="80px">
        <el-form-item label="作业名称">
          <el-input v-model="hwForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="选择班级">
          <el-select v-model="hwForm.classId" placeholder="Select" size="large" style="width: 240px">
            <el-option v-for="item in classList" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="hwForm.startTime" type="date" placeholder="Pick a day" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="hwForm.endTime" type="date" placeholder="Pick a day" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddHW">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'></style>